<template>
  <div class="edit-info-page container2">
    <el-tabs v-model="activeName">
      <!-- 个人信息部分 -->
      <el-tab-pane label="更新个人信息" name="userInfo">
        <h4 class="edit-title">编辑个人资料</h4>
        <uploader action="/upload" @uploadSuccess="uploadUserAvatSuccess">
          <div class="edit-avatar-box">
            <div class="edit-avatar">
              <img :src="userInfo.avatar || avatar" />
            </div>
          </div>
        </uploader>
        <validate-form @form-sumit="onUserFormSumit">
          <p class="text-label">用户姓名:</p>
          <validate-input
            :rules="userNameRules"
            v-model="userInfo.nickName"
          ></validate-input>
          <p class="text-label">用户简介:</p>
          <validate-input
            tagType="textarea"
            v-model="userInfo.description"
            rows="10"
          ></validate-input>
          <template #submit>
            <div class="sumit-btn">
              <button class="btn btn-primary">提交修改</button>
            </div>
          </template>
        </validate-form>
      </el-tab-pane>
      <!-- 专栏信息部分 -->
      <el-tab-pane label="更新专栏信息" name="columnInfo">
        <h4 class="edit-title">编辑专栏资料</h4>
        <uploader action="/upload" @uploadSuccess="uploadColumnAvatSuccess">
          <div class="edit-avatar-box">
            <div class="edit-avatar">
              <img :src="columnInfo.avatar || logo" />
            </div>
          </div>
        </uploader>
        <validate-form @form-sumit="onColumnFormSumit">
          <p class="text-label">专栏名称:</p>
          <validate-input
            :rules="columnTitleRules"
            v-model="columnInfo.title"
          ></validate-input>
          <p class="text-label">专栏简介:</p>
          <validate-input
            tagType="textarea"
            v-model="columnInfo.description"
            rows="10"
          ></validate-input>
          <template #submit>
            <div class="sumit-btn">
              <button class="btn btn-primary">提交修改</button>
            </div>
          </template>
        </validate-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import ValidateForm from "@/components/ValidateForm.vue";
import ValidateInput, { RulesProps } from "@/components/ValidateInput.vue";
import { useMainStore } from "@/stores/main";
import { useRouter } from "vue-router";
import avatar from "@/assets/avatar.jpg";
import logo from "@/assets/logo.png";

import {
  getColumnDetail,
  getCurrentUser,
  updateCurrentUser,
  updateColumn,
} from "@/api/api";
import createMessage from "@/components/CreateMessage";
import Uploader from "@/components/Uploader.vue";
import { assignAttrToObj } from "@/share/helper";
interface EditUserProps {
  nickName: string;
  description: string;
  avatar: string;
}
interface EditColumnProps {
  title: string;
  avatar: string;
  description: string;
}
export default defineComponent({
  components: {
    ValidateInput,
    ValidateForm,
    Uploader,
  },
  setup() {
    const store = useMainStore();
    const router = useRouter();
    const activeName = ref("userInfo");
    const userInfo = reactive<EditUserProps>({
      nickName: "",
      description: "",
      avatar: "",
    });
    const columnInfo = reactive<EditColumnProps>({
      title: "",
      description: "",
      avatar: "",
    });
    const userNameRules: RulesProps = [
      { type: "required", message: "个人名称不能为空" },
    ];
    const columnTitleRules: RulesProps = [
      { type: "required", message: "专栏名称不能为空" },
    ];
    const { column, _id } = store.user;
    const uploadUserAvatSuccess = function (uploadDate) {
      userInfo.avatar = uploadDate.url;
    };
    const uploadColumnAvatSuccess = function (uploadDate) {
      columnInfo.avatar = uploadDate.url;
    };
    async function initPage() {
      /* 获得当前用户信息 */
      const user = await getCurrentUser();
      assignAttrToObj(userInfo, user);
      userInfo.description = userInfo.description
        ? userInfo.description
        : "此处填写用户简介";
      /* 获取专栏信息 */
      const columnData = await getColumnDetail(column);
      assignAttrToObj(columnInfo, columnData);
      columnInfo.description = columnData.description
        ? columnData.description
        : "此处填写专栏简介";
    }
    initPage();
    /* 更新用户信息 */
    const onUserFormSumit = function (valid: boolean) {
      if (valid) {
        updateCurrentUser(_id, { ...userInfo }).then((res) => {
          createMessage("个人信息修改成功", "success");
          router.push("/");
        });
      }
    };
    /* 更新专栏信息 */
    const onColumnFormSumit = function (valid: boolean) {
      if (valid) {
        updateColumn(column, { ...columnInfo }).then((res) => {
          createMessage("专栏信息修改成功", "success");
          // router.push("/")
        });
      }
    };
    return {
      activeName,
      onUserFormSumit,
      userNameRules,
      userInfo,
      uploadUserAvatSuccess,
      columnInfo,
      uploadColumnAvatSuccess,
      onColumnFormSumit,
      columnTitleRules,
    };
  },
});
</script>
<style lang="scss" scoped>
.edit-title {
  margin: 0 0 20px 0;
}
.edit-avatar {
  margin: 0 auto;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 1px #ccc solid;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.sumit-btn {
  margin-top: 20px;
  text-align: right;
}
</style>
